<template>
  <view class="main">
    <!-- 		<uni-notice-bar show-icon scrollable color="#2979FF" background-color="#EAF2FF"
			:text="`今日通证价格 1 通证 = ${latestPrice} 元`" />
		<view class="msg-card">
			<view class="left">
				<view class="title">
					我的通证
				</view>
				<view class="sub-title">
					{{tokenNum}}
				</view>
			</view>
			<view class="right">
				<view class="title">
					可兑换
				</view>
				<view class="sub-title">
					￥ {{maxprice}}
				</view>
			</view>
		</view>
		<view class="with-draw">
			<view class="left">
				通证数：
			</view>
			<view class="right">
				<input class="uni-input" type="number" v-model="curNum" placeholder="输入通证数量(整数)" />
			</view>
		</view>
		<view class="submit-btn">
			<button @click="submit" :disabled="curNum === ''" :class="curNum === ''?'dis-btn':''">提现</button>
		</view>
	</view> -->
    <view class="topCard">
      <view class="top"> 今日{{ $tokenName }}价格：{{ latestPrice }} </view>
      <view class="subtop"> 我的{{ $tokenName }}：{{ tokenNum }} </view>
    </view>
    <view class="bottom">
      <view class="title"> 提现{{ $tokenName }}数量 </view>
      <view class="ipt">
        <input
          class="uni-input"
          type="number"
          placeholder-style="font-size:30rpx"
          v-model="curNum"
          placeholder="输入要提现的数量(整数)" />
      </view>
      <view class="more">
        最多可提现 <text>{{ maxprice }}</text> 元
      </view>
      <view class="submit-btn">
        <button
          v-if="type === 0"
          @click="submit"
          :disabled="curNum === ''"
          :class="curNum === '' ? 'dis-btn' : ''">
          提现
        </button>
        <button
          v-if="type === 1"
          @click="toPage">
          去实名
        </button>
        <button
          v-if="type === 2"
          @click="toPage">
          去绑卡
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  import { reqGetRealnameStatus } from '@/apis/my.js'
  import { getCashInfo, withdraw } from '@/apis/first.js'
  export default {
    computed: {
      maxprice() {
        let num = (parseInt(this.tokenNum) * this.latestPrice).toFixed(2)
        if (isNaN(num)) {
          return 0
        } else {
          return num
        }
      }
    },
    data() {
      return {
        tokenNum: '',
        latestPrice: '',
        curNum: '',
        // 0 实名绑卡完成 1 未实名 2 未绑卡
        type: 1
      }
    },
    onLoad() {
      this.info = this.$store.getters.userInfo
    },
    onShow() {
      this.getCashInfo()
      this.getRealnameStatus()
    },
    methods: {
      toPage() {
        if (this.type === 1) {
          uni.redirectTo({
            url: '/pages/RealName/RealName'
          })
        } else if (this.type === 2) {
          uni.redirectTo({
            url: '/pages/bankCard/index'
          })
        }
      },
      async getRealnameStatus() {
        let resd = await reqGetRealnameStatus({
          id: this.info.id
        })
        if (resd.code === 200) {
          this.type = 0
        } else if (resd.code === 51003) {
          this.type = 1
        } else if (resd.code === 51004) {
          this.type = 2
        }
        // if (resd.code !== 200) {
        // 	uni.showModal({
        // 		content: resd.message,
        // 		confirmText: '去完善',
        // 		cancelColor: '#999',
        // 		confirmColor: '#2f64ff',
        // 		mask: true,
        // 		success: (res) => {
        // 			if (res.confirm) {
        // 				let url = '';
        // 				if (resd.code === 51003) {
        // 					url = '/pages/RealName/RealName';
        // 				} else if (resd.code === 51004) {
        // 					url = '/pages/bankCard/bankCard'
        // 				}

        // 				// url = '/pages/RealName/RealName';

        // 				uni.redirectTo({
        // 					url,
        // 				});
        // 			} else {
        // 				uni.navigateBack();
        // 			}
        // 		},
        // 	})
        // }
      },
      async getCashInfo() {
        const res = await getCashInfo({
          id: this.info.id
        })
        let data = res.data
        if (res.code == 200) {
          this.tokenNum = data.tokenNum
          this.latestPrice = data.latestPrice
        }
      },
      async submit() {
        let { curNum, tokenNum } = this
        let flag = false
        // 范围的上下限
        const minValue = 1
        const maxValue = tokenNum
        const regex = /^\d+$/
        if (regex.test(curNum)) {
          const num = parseInt(curNum)
          if (num >= minValue && num <= maxValue) {
            flag = true
          } else {
            flag = false
            uni.utils.toast(this.$tokenName + '数量不足')
            // if (tokenNum < 1) {
            // 	uni.utils.toast('通证数量不足');
            // } else {

            // 	uni.utils.toast('请输入1--' + parseInt(tokenNum) + '的整数')
            // }
          }
        } else {
          flag = false
          uni.utils.toast('请输入合法的整数')
        }

        if (!flag) return

        let data = await withdraw({
          cashOutNum: this.curNum,
          id: this.info.id
        })
        this.curNum = ''
        if (data.code == 200) {
          uni.showToast({
            title: '提现成功',
            icon: 'success',
            duration: 2000,
            mask: true
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/my/index'
            })
          }, 2000)
        } else {
          uni.utils.toast(data.message)
          this.getCashInfo()
        }
      }
    }
  }
</script>
<style>
  page {
    background: #f7f7f7;
  }
</style>
<style lang="scss" scoped>
  .main {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .topCard {
      padding: 0rpx 30rpx;
    }

    .top {
      padding: 40rpx 0;
      color: #1a1a1a;
      font-size: 28rpx;
    }

    .subtop {
      margin-bottom: 40rpx;
      color: #1a1a1a;
      font-size: 28rpx;
    }

    .bottom {
      flex: 1;
      background-color: #fff;
      padding: 40rpx 30rpx;
      border-radius: 32rpx 32rpx 0 0;

      .title {
        color: #1a1a1a;
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }

      .ipt {
        margin-bottom: 20rpx;

        /deep/ input {
          width: 100%;
          height: 100rpx;
          text-align: left;
          font-size: 48rpx;

          background-color: transparent !important;
          border-bottom: 1px solid #e6e6e6;
        }
      }

      .more {
        color: #999;
        font-size: 28rpx;
        margin-bottom: 120rpx;

        text {
          color: #0934ff;
        }
      }

      .submit-btn {
        padding: 0 30rpx;

        /deep/ button {
          background-color: #2f64ff;
          color: #fff;
        }

        .dis-btn {
          background-color: #eee;
        }
      }
    }
  }
</style>
